<template>
  <div style="display: flex;flex-direction: column;width: 100%">
    <Header :activeName="activeName"></Header>
    <div style="display: flex;margin-top: 90px;height: 30px;line-height: 30px;justify-content: center;">
      <el-breadcrumb :separator-icon="ArrowRight" style="height: 30px;width: 80%;align-items: center;line-height: 30px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>预约支付</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main class="main">
      <div class="r-c">
        <div class="r-c-title">
          <el-countdown prefix="请在" suffix="内完成支付，超时将取消预约" format="mm分ss秒" :value="countDown"
            value-style="color: red">
          </el-countdown>
        </div>
        <el-row :gutter="20">
          <el-col :span="12" style="text-align: right;margin: 30px 0;">课程名称：</el-col>
          <el-col :span="12" style="text-align: left;;margin: 30px 0;"><a href="/" style="color: red">{{ cName }} </a></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" style="text-align: right;margin: 30px 0;">支付金额：</el-col>
          <el-col :span="12" style="text-align: left;;margin: 30px 0;"><i style="color: red">￥{{ paid }}</i></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" style="text-align: right;margin: 30px 0;">账户余额：</el-col>
          <el-col :span="12" style="text-align: left;;margin: 30px 0;"><i style="color: red">￥{{ balance }}</i></el-col>
        </el-row>
        <div style="text-align: center;margin-top: 20px;height: 50px;line-height: 50px;">
          <el-button type="primary" v-if="balance >= paid" size="large" @click="paymentReserve">支付</el-button>
          <el-button type="primary" v-else size="large" @click="router.push('/profile/myWallet')">余额不足，请前往充值</el-button>
        </div>
      </div>
    </main>
    <Footer></Footer>
  </div>

</template>

<script setup lang="ts">
import Header from '@/components/header/Header.vue'
import Footer from '@/components/header/Footer.vue'
import Breadcrumb from '@/components/Breadcumb.vue'

// import LatestGoods from '@/components/indexDecorate/decorateList/LatestGoods.vue'

import {onMounted, reactive, ref} from 'vue'
import {useRouter} from "vue-router";
import {ArrowRight} from "@element-plus/icons-vue";
import {coachPage} from "@/api/coach.ts";
import {getMemberWallet, payment} from "@/api/payment.ts";
import storage from "@/utils/storage.ts";
import {ElMessage} from "element-plus";

const router = useRouter()
const activeName = router.currentRoute.value.path
const coachList = ref([])
const params = reactive({
  // 请求参数
  pageNum: 1,
  pageSize: 12,
  total: undefined,
})
const countDown = ref(Date.now() + 1000 * 60 * 1)

const balance = ref(0)
const paid = ref(0);
const cName = ref('')
const courseId = ref(undefined)
const user = ref();

const paymentReserve = () => {
  const username = user.value.username;
  const userId = user.value.id;
  const paymentData = {
    memberName: username,
    memberId: userId,
    amount: paid.value,
    courseId: courseId.value,
    remark: '预约课程支付'
  };
  payment(paymentData).then(res => {
    if(res.code == "00000" && res.data){
      ElMessage.success('支付成功')
      router.push('/profile/myReservation')
    }else{
      ElMessage.fail('支付失败')
    }
  })
}

const memberWallet = () => {
  getMemberWallet({memberId: user.value.id}).then((res)=>{
    const data = res.data
    balance.value = data ? data.amount : 0
  })
}

onMounted(()=>{
  user.value = JSON.parse(storage.getItem("userInfo"))
  cName.value = router.currentRoute.value.query.cName
  courseId.value = router.currentRoute.value.query.cid
  paid.value = router.currentRoute.value.query.amount
  memberWallet()
})

</script>
<style scoped>
.main {
  width: 80%;
  position: relative;
  top: 20px;
  margin: auto;
  box-sizing: border-box;
  padding: 2px;
  border-top: 1px solid #4a4949;
  background-color: #fbf8f8;
  min-height: 733px;
  display: flex;
  justify-content: center;
}
.r-c {
  display: flex;
  flex-direction: column;
  width: 80%;
  border: 1px solid #4a4949;
  min-height: 400px;
  padding-top: 50px;
  color: #000000;
}
.r-c-title {
  height: 50px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
.c-d {
  color: red !important;
}
</style>
